<template>
  <div class="main">
    <div class="menus">
      <div class="logs">
        <img src="@/assets/log.png" alt="" srcset="">
        <div class="log-text">
          <p class="log-rt">长武县数字果业种植服务平台</p>
          <p class="log-rb">Changwu County Digital Fruit Industry Planting Service Platform</p>
        </div>
      </div>
      <el-menu :default-active="$route.meta.routePath" class="el-menu-demo" mode="horizontal" :ellipsis="false"
         active-text-color="#ffffff" router>
        <div class="flex-grow" />
        <el-menu-item v-for="item in pathlist" :key="item.path" :index="item.path">
          <template  #title>
            {{ item.meta.title }}
          </template>
        </el-menu-item>
        <div class="loginClass" @click="toPath">登录</div>
      </el-menu>
    </div>
    <div class="phoneMenu">
      <div class="logs">
        <img src="@/assets/log.png" alt="" srcset="" class="logimg">
        <div class="log-text">
          <p class="log-rt">长武县数字果业种植服务平台</p>
          <p class="log-rb">Changwu County Digital Fruit Industry Planting Service Platform</p>
        </div>
      </div>
      <div class="bthMenu" @click="showMenu=!showMenu">
        <div class="lines1"></div>
        <div class="lines2"></div>
        <div class="lines3"></div>
        <div class="menulist" v-if="showMenu">
           <div class="menu-item" :class="$route.meta.routePath==item.meta.routePath?'menu-active':''" v-for="item in  pathlist" :key="item.path" @click.stop="navto(item)">{{ item.meta.title }}</div>
        </div>
      </div>
    </div>
    <div class="router">
      <router-view />
    </div>
    
  </div>
</template>
<script setup>
const pathlist = ref([]) 
const router = useRouter()
const showMenu = ref(false)
onBeforeMount(()=>{
  pathlist.value = router.currentRoute._rawValue.matched[0].children.filter(v=>v.meta.menuShow)
})

//菜单跳转
const navto=(item)=>{  
    //  console.log(item)
     router.push(item.path)
     showMenu.value = false
}
const toPath = ()=>{
  window.open('http://grove.cpzsyun.com:81/#/login');
}
</script>

<style lang="scss">

/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: "阿里妈妈数黑体 Bold";
  font-weight: 700;
  src: url("//at.alicdn.com/wf/webfont/jKPYxc9pRyqa/7hsaKIbhF3yi.woff2") format("woff2"),
    url("//at.alicdn.com/wf/webfont/jKPYxc9pRyqa/f6VJxwAQKEIf.woff") format("woff");
  font-display: swap;
}

.main {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  .router{
     width: 100%;
     min-height: 80vh;
  }
  .phoneMenu{
    display: none;
  }
  .menus {
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: solid 1px #dcdfe6;
    .el-menu-demo {
    flex: 1;
    align-items: center;
    height: 80px;
  }  
  .logs {
    padding-left: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    .log-text {
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .log-rt {
        font-family: "阿里妈妈数黑体 Bold";
        font-weight: bold;
        color: #2F3331;
        line-height: 22px;
        font-size: 22px;
      }

      .log-rb {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #2F3331;
        line-height: 16px;
      }
    }
  }
 }
}


.el-menu--horizontal.el-menu {
  border-bottom: none !important;
  
}

.el-menu--horizontal>.el-menu-item.is-active {
  border-bottom: none !important;
  width: 119px !important;
  height: 40px !important;
  background: #52B870 !important;
  border-radius: 6px !important;
}
.el-menu-item{
  width: 119px !important;
  height: 40px !important;
  border-radius: 6px !important;
  margin-left: 20px!important;
  padding-bottom: 10px!important;
  padding-top: 10px!important;
  
}
.el-menu-item:hover {
  outline: 0 !important;
  color: #52B870 !important;
  background-color: #ffffff !important;
}

.flex-grow {
  flex-grow: 1;
}
.loginClass{
  color: #52B870;
  text-align: center;
  cursor: pointer;
  line-height: 35px;
  border-bottom: none ;
  width: 119px ;
  height: 35px ;
  background: #ffffff ;
  border-radius: 6px ;
  margin-right: 30px;
  border: 1px solid #52B870;
}
</style>
<style src="./phone/home.css" lang="scss" scoped></style>